<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        臭保底人钱包准备好了嘛(这玩应有毒)
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 内容 -->
      <!-- <tbody >  (这东西是剧毒)   -->
        <!-- 样板 -->
        <!-- <tr v-for="aa in goodList" :key="aa">
          <td><input type="checkbox" /></td>
          <td>{{ aa.name }}</td>
          <td>{{ aa.price }}</td>
          <td><input type="number" name="" id="" v-model="aa.num" /></td>
          <td>{{ aa.price * aa.num }}</td>
          <td><input type="button" value="删除" @click="shanchu(aa)" /></td>
        </tr> -->
        
        <KuwaKuwa
          v-for="(aa, bb) in goodList"
          :key="bb"
          :cc="aa.name"
          :dd="aa.price"
          :ee="aa.num"
          :gg="aa.cheked"
          @click="shanchu(bb)"
        />
        
      <!-- </tbody> -->
      <tfoot>
        <tr>
          <td>合计:</td>
          {{ hehe }}
          <he-ji />
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import KuwaKuwa from './components/HelloWorld4.vue';
import HeJi from "./components/HeJi.vue";

export default {
  components: {
    KuwaKuwa,
    HeJi
  },
  data() {
    return {
      goodList: [
        {
          name: '妮露',
          price: 180,
          num: 1,
          checked: false,
        },
        {
          name: '艾尔海森',
          price: 180,
          num: 1,
          checked: false,
        },
        {
          name: '纳西妲',
          price: 180,
          num: 1,
          checked: false,
        },
        {
          name: '八重神子',
          price: 180,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  methods: {
    shanchu(bb) {
      this.goodList.splice(bb, 1);
    },
  },
  
};
</script>

<style></style>
